<template>
	<view class="flex mt-20">
		<view class="w-[48%] left mr-20" v-if="studyList2.length">
			<view class="flex justify-between items-center">
				<text class="title">{{val.name}}</text>
				<view class="flex justify-center items-center" @click="onPath(`/pages/study/studyList`)">
					<text class="text-sm">更多</text>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</view>
			<view class="">
				<view class="bg-white shadow rounded-lg p-20 mt-20" v-for="(item, idx) in studyList2" :key="idx"
					@click="goStudyDetails(item.id)">
					<view class="flex items-stretch">
						<view class="">
							<view class="rounded-md overflow-hidden relative w-110 h-110">
								<ImageBoxVue :src="item.headimg" width="110rpx" height="110rpx"></ImageBoxVue>
								<view class="absolute w-full py-4 pl-10 bottom-0" style="background-color: rgba(0, 0, 0, 0.4);">
									<text class="text-white">{{item.dur}}</text>
								</view>
							</view>
							<view class="flex justify-center items-center">
								<ImageBoxVue src="/static/icons/look.png" width="28rpx" height="29rpx"></ImageBoxVue>
								<text class="ml-10">{{item.look}}万</text>
							</view>
						</view>
						<view class="flex-1 flex flex-col ml-10">
							<text class="text-sm font-bold multiline-ellipsis-1">{{item.name}}</text>
							<text class="flex-1 text-[#666666] multiline-ellipsis-3">{{item.brief}}</text>
						</view>
					</view>
					<view class="flex justify-between items-center mt-10">
						<view class="flex">
							<view class="w-72 h-72 rounded-full overflow-hidden">
								<ImageBoxVue :src="item.anchor.headimg" width="72rpx" height="72rpx"></ImageBoxVue>
							</view>
							<view class="flex flex-col ml-10 justify-around">
								<text>{{jobQuery(item.anchor)}}</text>
								<text class="">{{item.anchor.name}}</text>
							</view>
						</view>
						<view class="flex flex-col">
							<view class="flex items-center mb-10">
								<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="29rpx"></ImageBoxVue>
								<text class="ml-10">{{item.redprice}}钻</text>
							</view>
							<view class="flex items-center">
								<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="29rpx"></ImageBoxVue>
								<text class="ml-10">{{item.blueprice}}钻</text>
							</view>
						</view>
					</view>
					<view class="flex mt-10">
						<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
							<text class="font-bold">{{item.xdl}}</text>
							<text class="text-[#7290A6]">学到了</text>
						</view>
						<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
							<text class="font-bold">{{item.zdm}}</text>
							<text class="text-[#7290A6]">值得买</text>
						</view>
						<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
							<text class="font-bold">{{item.hyy}}</text>
							<text class="text-[#7290A6]">很有用</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="w-[48%] right" v-if="studyList1.length">
			<view class="flex justify-between items-center">
				<text class="title">{{val.name}}</text>
				<view class="flex justify-center items-center" @click="onPath(`/pages/study/studyList`)">
					<text class="text-sm">更多</text>
					<uni-icons type="right" size="18"></uni-icons>
				</view>
			</view>
			<view class="">
				<view class="bg-white shadow rounded-lg p-20 mt-20" v-for="(item, idx) in studyList1" :key="idx"
					@click="goStudyDetails(item.id)">
					<view class="flex items-stretch">
						<view class="">
							<view class="rounded-md overflow-hidden relative w-110 h-110">
								<ImageBoxVue :src="item.headimg" width="110rpx" height="110rpx"></ImageBoxVue>
								<view class="absolute w-full py-4 pl-10 bottom-0" style="background-color: rgba(0, 0, 0, 0.4);">
									<text class="text-white">{{item.dur}}</text>
								</view>
							</view>
							<view class="flex justify-center items-center">
								<ImageBoxVue src="/static/icons/look.png" width="28rpx" height="29rpx"></ImageBoxVue>
								<text class="ml-10">{{item.look}}万</text>
							</view>
						</view>
						<view class="flex-1 flex flex-col ml-10">
							<text class="text-sm font-bold multiline-ellipsis-1">{{item.name}}</text>
							<text class="flex-1 text-[#666666] multiline-ellipsis-3">{{item.brief}}</text>
						</view>
					</view>
					<view class="flex justify-between items-center mt-10">
						<view class="flex">
							<view class="w-72 h-72 rounded-full overflow-hidden">
								<ImageBoxVue :src="item.anchor.headimg" width="72rpx" height="72rpx"></ImageBoxVue>
							</view>
							<view class="flex flex-col ml-10 justify-around">
								<text>{{jobQuery(item.anchor)}}</text>
								<text class="">{{item.anchor.name}}</text>
							</view>
						</view>
						<view class="flex flex-col">
							<view class="flex items-center mb-10">
								<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="29rpx"></ImageBoxVue>
								<text class="ml-10">{{item.redprice}}钻</text>
							</view>
							<view class="flex items-center">
								<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="29rpx"></ImageBoxVue>
								<text class="ml-10">{{item.blueprice}}钻</text>
							</view>
						</view>
					</view>
					<view class="flex mt-10">
						<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
							<text class="font-bold">{{item.xdl}}</text>
							<text class="text-[#7290A6]">学到了</text>
						</view>
						<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
							<text class="font-bold">{{item.zdm}}</text>
							<text class="text-[#7290A6]">值得买</text>
						</view>
						<view class="flex flex-col items-center bg-[#F3FAFF] p-8 ml-10 justify-center">
							<text class="font-bold">{{item.hyy}}</text>
							<text class="text-[#7290A6]">很有用</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
	} from 'vue';
	import {
		jobQuery
	} from '@/config/publicFun';
	import courseApi from '@/apis/apiList/courseApi';

	const {
		val,
	} = defineProps(['val'])
	const studyList1 = ref([])
	const studyList2 = ref([])

	console.log(val);
	onMounted(() => {
		getCourselist1()
		getCourselist2()
	})

	// 查询列表 cousts 1 语音 2 视频
	const getCourselist1 = () => {
		courseApi.getCourselist({
			"coursetype.id": val.id,
			cousts: 1
		}).then(res => {
			studyList1.value = res.data
		})
	}
	// 查询列表
	const getCourselist2 = () => {
		courseApi.getCourselist({
			"coursetype.id": val.id,
			cousts: 2
		}).then(res => {
			studyList2.value = res.data
		})
	}

	const goStudyDetails = (id) => {
		console.log("id", id);
		uni.navigateTo({
			url: `/pages/test/lesson?type=lesson&id=${id}`
		})
	}
</script>

<style>
</style>